<template>

    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.userAccountState.visible"
            destroy-on-close
            title="账号信息"
            @close="api.closeAccount()"
    >

        <table v-if="api.userAccountState.data.length>0" class="account-list fill-width">
            <tr class="account-item">

                <td class="account-item-td" style="width: 120px">
                    <div class="d-flex align-center">
                        <i-icon class="mr-2" icon="mdi-account" size="18px"/>
                        <div> 账号</div>
                    </div>
                </td>

                <td class="account-item-td text-center">
                    <div v-if="account">
                        <el-text>
                            {{ account?.authAccount }}
                        </el-text>
                    </div>
                    <div v-if="!account">未绑定账号</div>
                </td>

<!--                <td class="account-item-td text-center" style="width: 100px">-->
<!--                    <div class="d-flex align-center">-->
<!--                        <div v-if="!account" class="text-center fill-width">未绑定</div>-->
<!--                        <el-switch-->
<!--                                v-else-->
<!--                                :disabled="!account"-->
<!--                                :model-value="<any>account.enabled"-->
<!--                                active-text="可用"-->
<!--                                inactive-text="关闭"-->
<!--                                inline-prompt-->
<!--                                style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--                                width="60"-->
<!--                                @change="(e)=>onEnabledChange(e,account)"-->
<!--                        />-->
<!--                    </div>-->
<!--                </td>-->

<!--                <td class="account-item-td text-center" style="width: 100px">-->
<!--                    <div class="d-flex align-center">-->
<!--                        <div v-if="!account" class="text-center fill-width">未绑定</div>-->
<!--                        <el-switch-->
<!--                                v-else-->
<!--                                :disabled="!account"-->
<!--                                :model-value="<any>account?.accountNonExpired"-->
<!--                                active-text="未过期"-->
<!--                                inactive-text="过期"-->
<!--                                inline-prompt-->
<!--                                style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--                                width="70"-->
<!--                                @change="(e)=>onAccountNonExpiredChange(e,account)"-->
<!--                        />-->
<!--                    </div>-->
<!--                </td>-->

            </tr>

            <tr class="account-item">

                <td class="account-item-td" style="width: 120px">
                    <div class="d-flex align-center">
                        <i-icon class="mr-2" icon="mdi-phone" size="18px"/>
                        <div> 手机号</div>
                    </div>
                </td>

                <td class="account-item-td text-center">
                    <div v-if="phone">
                        <el-text>
                            {{ phone.authAccount }}
                        </el-text>
                    </div>
                    <div v-if="!phone">未绑定手机号</div>
                </td>

<!--                <td class="account-item-td text-center" style="width: 160px">-->
<!--                    <div class="d-flex align-center">-->
<!--                        <div v-if="!phone" class="text-center fill-width">未绑定</div>-->
<!--                        <el-switch-->
<!--                                v-else-->
<!--                                :disabled="!phone"-->
<!--                                :model-value="<any>phone.enabled"-->
<!--                                active-text="可用"-->
<!--                                inactive-text="关闭"-->
<!--                                inline-prompt-->
<!--                                style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--                                width="60"-->
<!--                                @change="(e)=>onEnabledChange(e,phone)"-->
<!--                        />-->
<!--                    </div>-->
<!--                </td>-->

<!--                <td class="account-item-td text-center" style="width: 160px">-->
<!--                    <div class="d-flex align-center">-->
<!--                        <div v-if="!phone" class="text-center fill-width">未绑定</div>-->
<!--                        <el-switch-->
<!--                                v-else-->
<!--                                :disabled="!phone"-->
<!--                                :model-value="<any>phone?.accountNonExpired"-->
<!--                                active-text="未过期"-->
<!--                                inactive-text="过期"-->
<!--                                inline-prompt-->
<!--                                style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--                                width="70"-->
<!--                                @change="(e)=>onAccountNonExpiredChange(e,phone)"-->
<!--                        />-->
<!--                    </div>-->
<!--                </td>-->

            </tr>

            <tr class="account-item">

                <td class="account-item-td" style="width: 120px">
                    <div class="d-flex align-center">
                        <i-icon class="mr-2" icon="mdi-email" size="18px"/>
                        <div> 邮箱号</div>
                    </div>
                </td>

                <td class="account-item-td text-center">
                    <div v-if="email">
                        <el-text>
                            {{ email.authAccount }}
                        </el-text>
                    </div>
                    <div v-if="!email">未绑定邮箱号</div>
                </td>

<!--                <td class="account-item-td text-center" style="width: 100px">-->
<!--                    <div class="d-flex align-center">-->
<!--                        <div v-if="!email" class="text-center fill-width">未绑定</div>-->
<!--                        <el-switch-->
<!--                                v-else-->
<!--                                :disabled="!email"-->
<!--                                :model-value="<any>email.enabled"-->
<!--                                active-text="可用"-->
<!--                                inactive-text="关闭"-->
<!--                                inline-prompt-->
<!--                                style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--                                width="60"-->
<!--                                @change="(e)=>onEnabledChange(e,email)"-->
<!--                        />-->
<!--                    </div>-->
<!--                </td>-->

<!--                <td class="account-item-td text-center" style="width: 100px">-->
<!--                    <div class="d-flex align-center">-->
<!--                        <div v-if="!email" class="text-center fill-width">未绑定</div>-->
<!--                        <el-switch-->
<!--                                v-else-->
<!--                                :disabled="!email"-->
<!--                                :model-value="<any>email?.accountNonExpired"-->
<!--                                active-text="未过期"-->
<!--                                inactive-text="过期"-->
<!--                                inline-prompt-->
<!--                                style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--                                width="70"-->
<!--                                @change="(e)=>onAccountNonExpiredChange(e,email)"-->
<!--                        />-->
<!--                    </div>-->
<!--                </td>-->

            </tr>

        </table>
    </el-dialog>

    <AccountEdit :api="api"/>
</template>

<script lang="ts" setup>
import {AccountApi} from "~/api/system/account";
import {computed, reactive, watch} from "vue";
import {CommonApi} from "~/api/system/common.api";
import {Account} from "~/api/system/account/types";
import IIcon from "~/icesoft/components/icon/IIcon.vue";
import AccountEdit from "~/views/system/user/AccountEdit.vue";

interface Props {
    userId: string;
    api: AccountApi;
}

const authTypeList = reactive<{
    data: any[]
}>({
    data: [],
});
const commonApi = new CommonApi();
const {userId, api} = withDefaults(defineProps<Props>(), {});

const account = computed(() => {
    return (api.userAccountState.data as any[]).find(item => item?.authType == "ACCOUNT");
});

const phone = computed(() => {
    return (api.userAccountState.data as any[]).find(item => item?.authType == "PHONE");
});

const email = computed(() => {
    return (api.userAccountState.data as any[]).find(item => item?.authType == "EMAIL");
});

function onEnabledChange(value: boolean, item: Account) {
    item.enabled = value;
    api.updateEnabled(item.id as any, item);
}

function onAccountNonExpiredChange(value: boolean, item: Account) {
    item.accountNonExpired = value;
    api.updateAccountNonExpired(item.id as any, item);
}

function onUnBind(id: string) {
    api.onDelete(id, "警告！", "您确定要解除绑定吗？", {
        confirmButtonText: "解除",
        cancelButtonText: "取消",
        type: "error",
    }, false).then(() => {
        api.queryByUserId(userId);
    });
}

watch(() => api.userAccountState.visible, value => {
    if (value) {
        commonApi.attachMore([{
            target: "AUTH_TYPE",
        }]).then(res => {
            if (res.ok && res.data) {
                res.data[`authTypeOptions`].forEach((item: any) => {
                    if (item.value !== "WECHAT" && item) {
                        authTypeList.data.push(item);
                    }
                });
            }
        });
    }
});

watch(() => api.editState.visible, value => {
    if (!value) {
        api.queryByUserId(userId);
    }
});
</script>

<style lang="scss" scoped>

.account-list {
  border-radius: 6px;
  border: 1px solid var(--el-border-color);
  width: 100%;
  border-spacing: 0;

  th, td {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  td {
    &:last-child {
      border-right: none !important;
    }
  }

  tr {
    &:last-child {
      td {
        border-bottom: none !important;
      }
    }
  }

  .account-item {
    font-size: 14px;
    border-bottom: 1px solid var(--el-border-color);

    .account-item-td {
      padding: 16px !important;
      border-bottom: 1px solid var(--el-border-color);
    }
  }
}
</style>
